<!DOCTYPE html>
<html>
	<head>
		<title>主页</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css">
		<style type="text/css">
			*{padding: 0; margin: 0;}
			body{background-color: #EEE;}
			.app{
				font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
			}
			.content-box{
				margin: 1em;
				padding: 1em;
				background-color: #FFF;
				color: #666;
			}
			
			.kapian li{margin: 10px 0px;}
			.doc-wz{margin-left: 1em; line-height: 1.7em;}
			
			.code-p{padding: 0.5em 1em; background-color: #EEE;}
			.code-t{width: 100%; min-height: 50px; border: 1px #DDD solid;}
			
		</style>
	</head>
	<body>
		
		<div class="app">
			
			<div class="content-box">
				<el-divider content-position="left">
					<span style="font-size: 2em;">SA-ADMIN 使用步骤</span>
					<span style="color: #666;">&emsp;五分钟快速上手</span>
				</el-divider>
				<br>
				<div class="kapian" style="font-size: 0.9em; line-height: 2em;">
					<ol style="padding-left: 3em;">
						<li>
							<b>获取源码：</b>
							<div class="doc-wz">
								<p>你有两种方式获取源码</p>
								<p>* 通过gitee、或github获取源码</p>
								<p>* <a href="../sa-admin-dev.rar" target="_blank">点我直接下载</a></p>
							</div>
						</li>
						<li>
							<b>使用说明：</b>
							<div class="doc-wz">
								<p>在使用时，不建议你直接魔改模板的代码，以免在运行时出现意外bug，而是用扩展的方法，来适应你的业务逻辑</p>
								<p>如何扩展？在sa-resourecs文件下，有个 my-code.js ，这是专门为了方便你接入你的业务逻辑而预留的一个文件 你可以在此文件中根据模板提供的API来操作模板</p>
								<p>具体可以操作哪些接口？接着往下看</p>
							</div>
						</li>
						<li>
							<b>怎么自定义菜单树</b>
							<p>方式1：在 menu-list.js 中，根据已有的样例，直接修改 </p>
							<p>方式2：删除menu-list.js中所有代码，在 my-code.js中，调用接口：</p>
							<p class="code-p">
								var myMenuList = [...];	// 具体格式，请参考my-code.js文件中的示例 <br>
								sp.setMenuList(myMenuList);	// 写入菜单
							</p>
							<p> 如果需要获得更多操作能力，如：动态添加菜单、删除菜单等等，可直接 sp.menuList 获得菜单引用，直接操作对象</p>
						</li>
						
						<li>
							<b>js控制打开某个菜单</b>
							<p class="code-p">
								sp.selectMenu(id); 	// 菜单id
							</p>
						</li>
						
						<li>
							<b>如何设置user信息</b>
							<p>
								用户登录后，右上角可直接显示用户的头像和昵称, <br>
								默认策略为：在加载页面时读取本地存储localStorage 中 curr_user 的key，该值格式为：{username: '昵称', avatar: '头像地址'};<br>
								所以你可以在登录时，以此为格式，写入值：
							</p>
							<p class="code-p">
								var curr_user = {username: '我的昵称', avatar: 'sa-resources/admin-logo.png'}; <br>
								localStorage.setItem('curr_user', JSON.stringify(curr_user));
							</p>
							<p>或者调用以下API，直接设置：</p>
							<p class="code-p">
								sp.user = {username: '张三', avatar: '头像地址'};
							</p>
						</li>
						
						<li>
							<b>重写按钮事件(我的资料和退出登录)</b>
							<p class="code-p">
								// 重写，点击【我的资料】的事件  <br>
								sp.fn_user_info = function() { /* ... */ } <br>
								// 重写，点击【退出登录】的事件 <br>
								sp.fn_login_out = function() { /* ... */ }
							</p>
						</li>
						
						<li>
							<b>以上示例在 my-code.js中 都有相应的注释说明，如何还有不懂的地方，可以加群问我（群链接在首页）</b>
						</li>
						
						<li>
							<b>为什么只有个框架？没有一些具体的增删改查页面？</b>
							<p>
								一个合适的模板，如果和我们的后台接口高度匹配的情况下，确实可以大大加快我们的开发速度，
								但是考虑到每个人每个项目的代码风格千差万别，不可能做出一个能够适应所有项目的前台模板，事实上没有任何一个模板能够做到这件事，
								所以精力有限的我只能将这件吃力不讨好的事暂缓一段时间，先写出一个页面框架，可以直接上手应用在项目中（这也是框架主要对你能够起作用的地方）
								
							</p>
						</li>
						
					</ol>
				</div>
			</div>
			<br><br>
			
		</div>
		
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>
		<script type="text/javascript">
			
			new Vue({
				el: '.app',
				data: {
					textarea1: '',
				},
				methods: {
					// 没了
					meile: function() {
						this.$message({
							message: '没了还点',
							type: 'warning'
						});
					}
				}
			})
			
			
		</script>
		
		
	</body>
</html>
